<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="我的菜单1">
          <div>
            <mini-area />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="我的菜单2">
          <div>
            <mini-area />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="我的菜单3">
          <div>
            <mini-bar :height="50"/>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="我的菜单4">
          <div>
            <mini-bar :height="50"/>
          </div>
        </chart-card>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">

        <a-tabs size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
<!--            <a-radio-group v-model="indexRegisterType" @change="changeRegisterType">-->
<!--              <a-radio-button value="ok">合格率优</a-radio-button>-->
<!--              <a-radio-button value="error">合格率差</a-radio-button>-->
<!--              <a-radio-button value="">所有</a-radio-button>-->
<!--            </a-radio-group>-->
            为了顺畅的使用系统，请尽快处理未合格数据项！
          </div>

          <a-tab-pane loading="true" tab="数据合格率校验" key="1">

            <a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination1" @change="tableChange1">
              <template slot="flowRate" slot-scope="text, record, index">
                <a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
              </template>
            </a-table>
          </a-tab-pane>

        </a-tabs>


      </a-card>
    </a-row>

  </div>
</template>

<script>

  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import ChartCard from '@/components/ChartCard'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniArea from '@/components/chart/MiniArea'
  import IndexBar from '@/components/chart/IndexBar'
  import BarMultid from '@/components/chart/BarMultid'
  import DashChartDemo from '@/components/chart/DashChartDemo'
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: "IndexBdc",
    components: {
      ChartCard,
      MiniBar,
      MiniArea
    },
    data() {
      return {
        loading: true,
        dataSource1:[],
        columns:[{
          title: '校验项编码',
          align:"center",
          dataIndex: 'checkCode'
        },{
          title: '校验项名称',
          align:"center",
          dataIndex: 'checkName'
        },{
          title: '合格情况',
          align:"center",
          dataIndex: 'passRate',
          customRender: function(text) {
            return text == 'ok'?'合格':'不合格'
          }
        },{
          title: '校验时间',
          align:"center",
          dataIndex: 'checkDate'
        },{
          title: '校验说明',
          align:"center",
          dataIndex: 'remarks'
        },{
          title: '校验结果',
          align:"center",
          dataIndex: 'flowRate',
          scopedSlots: { customRender: 'flowRate' }
        }],
        ipagination1:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,

        },
        indexRegisterType:"",
        url:{
          dataEffectivenessList: "/dataEffectiveness/queryApi/list"
        }
      }
    },
    methods:{
      getInItDataEffectiveness() {
        let params = {}
        getAction(this.url.dataEffectivenessList, params).then(res => {
          if (res.success) {
            this.dataSource1 = res.result.data;
          } else {
            this.$message.error(res.message)
          }

        })
      },
      goPage(){
        this.$message.success("根据业务自行处理跳转页面!")
      },
      changeRegisterType(e){
        this.indexRegisterType = e.target.value
      },
      tableChange1(pagination){
        this.ipagination1.current = pagination.current
        this.ipagination1.pageSize = pagination.pageSize
        this.queryTimeoutInfo()
      },
      getFlowRateNumber(value){
        return Number(value)
      },
      getPercentFormat(value){
        if(value==100){
          return value+"% 优"
        }else{
          return value+"% 低"
        }
      },
      getPercentColor(value){
        let p = Number(value)
        if(p <= 60){
          return 'red'
        }else if(p > 60){
          return 'rgb(16, 142, 233)'
        }else{
          return 'rgb(244, 240, 89)'
        }
      },
    },
    created() {
      this.getInItDataEffectiveness();
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;
    color: red;
    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;
    a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .item-group {
    .more-btn {
      margin-bottom: 13px;
      text-align: center;
    }
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
  }

  @media only screen and (min-width: 1600px) {
    .list-content-item{
      margin-left:60px;
    }
  }

  @media only screen and (max-width: 1300px) {
    .list-content-item{
      margin-left:20px;
    }
    .width-hidden4{
      display:none
    }
  }
  .list-content-item{
    span{line-height: 20px;}
  }
  .list-content-item{
    p{margin-top: 4px;margin-bottom:0;line-height:22px;}
  }
  .anty-list-cust {
    .ant-list-item-meta{flex: 0.3 !important;}
  }
  .anty-list-cust {
    .ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
  }


</style>